<template>
  <el-tree :data="menus"
           :props="defaultProps"
           node-key="catId"
           ref="menuTree"
           @node-click="nodeClick"
  >
  </el-tree>
</template>

<script>
    export default {
      name: '',
        // 存放 数据
      data: function () {
        return {
          menus: [],
          defaultProps: {
            children: 'children',
            label: 'name'
          },
          expandKeyTree: []
        }
      },
        // 存放 方法
      methods: {
        getMenus () {
          this.$http({
            url: this.$http.adornUrl('/product/category/list/tree'),
            method: 'get'
          }).then(data => {
            this.menus = data.data.data
          })
        },
        nodeClick (data, node, component) {
          // console.log(data, node, component)
          // 向父组件发送事件(子组件给父组件传数据)
          this.$emit('tree-node-click', data, node, component)
        }
      },
        // 存放 过滤器
      filters: {},
        // 自定义 私有指令
      directives: {},
        // 存放 子组件
        // template: '',
        // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
        // props 中的数据，都是只读的，无法重新赋值
        // props: [], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
        /*  生命周期函数  */
        // 创建期间
      beforeCreate () {
      },
      created () {
        this.getMenus()
      },
      beforeMount () {
      },
      mounted () {
      },
        // 运行期间
      beforeUpdate () {
      },
      updated () {
      },
        // 销毁时期
      beforeDestroy () {
      },
      destroyed () {
      }

    }
</script>

<style scoped>
</style>
